<template>
    <div class="zzalk">
        <!-- 致灾案例库 -->
        <div class="left-panel">
            <div class="title">
                <h4>
                    <img
                        style="height: 30px; vertical-align: middle; margin-top: -2px"
                        src="@/assets/images/panel/trangle.png"
                        alt=""
                    />
                    致灾案例库
                </h4>
            </div>
            <!-- 案例库信息查询 -->
            <div class="info-search">
                <!-- 第一行内容：标签时间、日期范围选择器、查询按钮 -->
                <div class="query-section">
                    <div class="time-label">时间：</div>
                    <el-date-picker
                        v-model="dateSelect"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                    ></el-date-picker>
                    <button class="search-btn" @click="queryList">查询</button>
                </div>
                <!-- 第二行内容：三个复选框 -->
                <div class="checkbox-group">
                    <label>
                        <input type="checkbox" value="1" v-model="zhType" />
                        洪水灾害
                    </label>
                    <label class="check-label">
                        <input type="checkbox" value="2" v-model="zhType" />
                        山洪灾害
                    </label>
                    <label class="check-label">
                        <input type="checkbox" value="3" v-model="zhType" />
                        地质灾害
                    </label>
                </div>
            </div>
            <!--案例库信息展示-->
            <div class="info-list">
                <table>
                    <tbody>
                        <tr v-for="(item, index) in tableList" :key="index" @click="rowClicked(item)">
                            <td>{{ item.occurrenceDate }}</td>
                            <td>{{ item.caseName }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="right-panel" >
            <div class="title">
                <h4>
                    <img
                        style="height: 30px; vertical-align: middle; margin-top: -2px"
                        src="@/assets/images/panel/trangle.png"
                        alt=""
                    />
                    案例分析结果
                </h4>
            </div>
            <!-- 案例分析结果 -->
            <div class="fxResult" v-if="infoShow" >
                <table>
                    <tr>
                        <td style="background-color: #3c6485; height: 10%;width: 97px;">起止时间</td>
                        <td style="background-color: rgba(8, 46, 82, 0.8); height: 10%">
                            {{ resultInfo.occurrenceToEndDate }}
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color: #3c6485; height: 10%">过程等级</td>
                        <td style="background-color: rgba(8, 46, 82, 0.8); height: 10%">
                            {{ resultInfo.riskLevel }}
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color: #3c6485; height: 10%">发布预警情况</td>
                        <td style="background-color: rgba(8, 46, 82, 0.8); height: 10%">
                            {{ resultInfo.warningSystem }}
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color: #3c6485; height: 10%">影响区域</td>
                        <td style="background-color: rgba(8, 46, 82, 0.8); height: 10%">
                            {{ resultInfo.impactArea}}
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color: #3c6485; height: 15%">灾情详情</td>
                        <td style="background-color: rgba(8, 46, 82, 0.8); height: 15%">
                            {{ resultInfo.analysisConclusion }}
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color: #3c6485; height: 45%">过程描述</td>
                        <td style="background-color: rgba(8, 46, 82, 0.8); height: 45%">
                            {{ resultInfo.disasterProcess }}
                        </td>
                    </tr>
                </table>
            </div>
            <div class="right-bottom">
                <div class="right-bootom-left"></div>
                <div class="right-bottom-right">
                    <PanelTitle
                        :title="menus[showQureyPanel].title"
                        :content="menus[showQureyPanel].eng"
                    ></PanelTitle>
                    <div class="right-bottom-content">
                        <!-- s实况 -->
                        <Facts v-if="showQureyPanel == 0" @handFacts="handFacts"></Facts>
                        <!-- 预报 -->
                        <Yubao v-if="showQureyPanel == 1" @handleYuBao="handleYuBao"></Yubao>
                        <!-- 雷达 -->
                        <LeiDa v-if="showQureyPanel == 2" @handleLeida="handleLeida"></LeiDa>
                        <!-- 云图 -->
                        <YuTu v-if="showQureyPanel == 3" @handleYunTu="handleYunTu"></YuTu>
                        <!-- 气候统计 -->
                        <ClimateSum
                            v-if="showQureyPanel == 4"
                            @showDialog="handleShowRiverInfoCharts"
                        ></ClimateSum>
                    </div>
                    <!-- <div class="right-bottom-bottom"></div> -->
                </div>
            </div>
        </div>
        <DialogRiverCharts
            v-if="isShowRiverDialog"
            :dialogTableVisible="isShowRiverDialog"
            :current-river="selectCurrentRiver"
            @closedRiverDialog="closedRiverDialog"
        ></DialogRiverCharts>
        <!-- Footer -->
        <Footer></Footer>
    </div>
</template>
<script>
import Footer from '@/components/ui/Footer.vue';
import { menuDataFooter } from '@/store/menuData';
import PanelTitle from '@/components/ui/panelTitle.vue';
import Facts from '@/components/select/facts.vue';
import Yubao from '@/components/select/yubao.vue';
import LeiDa from '@/components/select/leiDa.vue';
import YuTu from '@/components/select/yutu.vue';
import ClimateSum from '@/components/select/climateSum.vue';
//河流信息弹窗组件
import DialogRiverCharts from '@/components/ui/dialogRiver.vue';
import { Vector as VectorSource } from 'ol/source';
import { Feature } from 'ol';
import { Point } from 'ol/geom';
import { Vector, Heatmap, Image } from 'ol/layer';
import { Stroke, Style, Fill, Circle, Text } from 'ol/style';
import { ImageStatic } from 'ol/source';
import { transformExtent, toUserCoordinate } from 'ol/proj';
import{getCaseList} from '@/api/zzalk';
import TileSource from 'ol/source/Tile';
export default {
    name: 'zzalk-page',
    components: {
        //Footer
        Footer,
        PanelTitle,
        YuTu,
        Facts,
        Yubao,
        LeiDa,
        ClimateSum,
        //显示逐年面雨量和面雨量距平值时序的图表
        DialogRiverCharts,
    },
    data() {
        return {
            dateSelect: [new Date(2024, 5, 1), new Date(2024, 9, 31)],
            zhType: ['3'],
            //显示某条河流的信息
            isShowRiverDialog: false,
            infoShow: false,
            //当前点击的河流
            selectCurrentRiver: null,
            tableList: [
                
                // 更多数据...
            ],
            resultInfo: {
                date: '2024-01-01 - 2024-01-07',
                level: '高',
                intro: '已发布橙色预警',
                area: '长江中下游地区',
                detail: '洪水导致农田淹没，房屋受损',
                description: '本次洪水灾害由连续降雨引发，涉及多个省份本次洪水灾害由连续降雨引发，涉及多个省份本次洪水灾害由连续降雨引发，涉及多个省份本次洪水灾害由连续降雨引发，涉及多个省份本次洪水灾害由连续降雨引发，涉及多个省份本次洪水灾害由连续降雨引发，涉及多个省份本次洪水灾害由连续降雨引发，涉及多个省份本次洪水灾害由连续降雨引发，涉及多个省份本次洪水灾害由连续降雨引发，涉及多个省份本次洪水灾害由连续降雨引发，涉及多个省份本次洪水灾害由连续降雨引发，涉及多个省份本次洪水灾害由连续降雨引发，涉及多个省份',
            },
        };
    },
    mounted() {
        this.queryList();
    },
    computed: {
        showQureyPanel() {
            return this.$store.getters['comprehenSive/SelectIndex'];
        },
        menus() {
            return menuDataFooter();
        },
    },

    methods: {
        rowClicked(item) {
      console.log('Row clicked:', item);
      this.infoShow = true;
      this.resultInfo = item;
    },
    formatDate(date) {
      // 将Date对象转换为"yyyy-MM-dd"格式的字符串
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
        //查询案例库信息
        queryList() {

            console.log('查询案例库信息');
            let params = {
                startTime: this.formatDate(this.dateSelect[0]),
                endTime: this.formatDate(this.dateSelect[1]),
                disasterTypeList:this.zhType,
            };
            getCaseList(params).then(res => {
                console.log(res);
                this.tableList = res.data;
                this.tableList.forEach(item => {
                    item.occurrenceDate = item.occurrenceDate.split(" ")[0]; 
})
               

             });
        },
        //显示河流的图表数据
        handleShowRiverInfoCharts(selectRiver) {
            console.log(selectRiver);
            this.selectCurrentRiver = selectRiver;
            this.isShowRiverDialog = true;
        },
        //关闭河流的图表弹窗
        closedRiverDialog() {
            this.isShowRiverDialog = false;
        },
        //处理实况查询
        handFacts(mapShowOfType, datas) {
            const positions = [];
            const rain = [];
            const names = [];
            console.log(datas);
            datas.forEach(data => {
                const position = [data.longitude, data.latitude];
                positions.push(position);
                rain.push(data.rain);
                names.push(data.stationName);
            });
            const source = new VectorSource();
            positions.forEach((position, index) => {
                source.addFeature(
                    new Feature({
                        geometry: new Point(position),
                        weight: rain[index],
                        name: names[index],
                    })
                );
            });
            //添加点图层
            let layer;
            if (mapShowOfType == '1') {
                layer = new Vector({
                    name: 'facts-layer',
                    source: source,
                    style: feature => {
                        console.log(feature);
                        return new Style({
                            text: new Text({
                                offsetX: 0,
                                offsetY: 10,
                                font: 'normal 16px 宋体',
                                text: feature.get('weight') + '\n' + feature.get('name'),
                                fill: new Fill({
                                    color: '#3EAAE1',
                                }),
                                //   stroke: new Stroke({
                                //     color: "#ff2d51",
                                //     width: 2,
                                //   }),
                            }),
                        });
                    },
                });
            }
            //添加热力图
            else if (mapShowOfType == '2') {
                layer = new Heatmap({
                    name: 'facts-layer',
                    source: source,
                    blur: 20,
                    radius: 15,
                    weight: function (feature) {
                        return feature.get('weight') * 10;
                    },
                });
            }
            layer.setZIndex(50);
            const map = this.$store.getters.Map;
            const view = map.view;
            view.animate({
                center: positions[0],
                zoom: 8,
                duration: 1000,
            });
            //判断是否有对应的图层
            let flag = false;
            let lastLayer;
            map.map
                .getLayers()
                .getArray()
                .forEach(layer => {
                    if (layer.get('name') == 'facts-layer') {
                        flag = true;
                        lastLayer = layer;
                        return;
                    }
                });
            if (flag) {
                map.map.removeLayer(lastLayer);
            }
            map.map.addLayer(layer);
            console.log(map.map.getLayers().getArray());
        },

        //处理雷达的事务
        handleLeida(data) {
            //判断是否有雷达图层
            const map = this.$store.getters.Map;
            map.map
                .getLayers()
                .getArray()
                .forEach(layer => {
                    if (layer.get('name') == 'Leida-layer') {
                        map.map.removeLayer(layer);
                    }
                });
            data.forEach((item, index) => {
                //创捷多个图片图层
                const path = item.path;
                const west = item.west;
                const south = item.south;
                const east = item.east;
                const north = item.north;
                const imageLayer = new Image({
                    name: 'Leida-layer',
                    source: new ImageStatic({
                        url: path,
                        imageExtent: transformExtent(
                            [west, south, east, north],
                            'EPSG:4326',
                            'EPSG:4326'
                        ),
                    }),
                    opacity: 0.5,
                });
                imageLayer.setZIndex(20);
                map.map.addLayer(imageLayer);
            });
        },

        //添加云图的数据
        handleYunTu(data) {
            //判断是否有云图的图层
            const map = this.$store.getters.Map;
            map.map
                .getLayers()
                .getArray()
                .forEach(layer => {
                    if (layer.get('name') == 'YunTu-layer') {
                        map.map.removeLayer(layer);
                    }
                });
            console.log(data);
            data.forEach(item => {
                //每一张图片对应一个图片图层
                const path = item.path;
                const west = item.west;
                const south = item.south;
                const east = item.east;
                const north = item.north;
                const imageLayer = new Image({
                    name: 'Leida-layer',
                    source: new ImageStatic({
                        url: path,
                        imageExtent: transformExtent(
                            // [69.446960,32.12374,102.995751,51.367755],
                            [69.44696, 32.12374, 102.995751, 50],
                            'EPSG:4326',
                            'EPSG:4326'
                        ),
                    }),
                });
                imageLayer.setZIndex(20);
                map.map.addLayer(imageLayer);
            });
        },
        //预处理预报的图片
        handleYuBao(datas, showType) {
            console.log(datas);
            //网格显示
            const map = this.$store.getters.Map;
            if (showType == '1') {
                const features = [];
                datas.forEach(data => {
                    const lats = data.rltmap.lats;
                    const lngs = data.rltmap.lons;
                    const vals = data.rltmap.vals;
                    let filterData = [];
                    lats.forEach((lat, index) => {
                        if (lat != null) {
                            filterData.push({
                                lat: lat,
                                lng: lngs[index],
                                val: vals[index],
                            });
                        }
                    });
                    filterData = this.filterPointsByStep(filterData, 450, 9);
                    filterData.forEach(item => {
                        const feature = new Feature({
                            geometry: new Point([item.lat, item.lng]),
                            val: item.val + '',
                        });
                        features.push(feature);
                    });
                });
                const source = new VectorSource({
                    features: features,
                });
                const girdLayer = new Vector({
                    source,
                    style: feature => {
                        return new Style({
                            text: new Text({
                                offsetX: 0,
                                offsetY: 0,
                                font: 'normal 12px 微软雅黑',
                                text: feature.get('val'),
                                fill: new Fill({
                                    color: '#333',
                                }),
                            }),
                        });
                    },
                    name: 'yubao-ER03-grid-layer',
                });

                girdLayer.setZIndex(20);
                map.map.addLayer(girdLayer);
                // map.view.animate({
                //   center: [34.3,73.5],
                //   duration: 1000,
                // });
            }
            //填色显示
            else if (showType == '2') {
                datas.forEach((data, index) => {
                    const url = 'data:image/png;base64,' + data.gridDataPicAndXY.filedata;
                    const xmin = data.gridDataPicAndXY.xmin;
                    const ymin = data.gridDataPicAndXY.ymin;
                    const xmax = data.gridDataPicAndXY.xmax;
                    const ymax = data.gridDataPicAndXY.ymax;
                    const imageLayer = new Image({
                        name: 'yubao-grid-layer' + index,
                        source: new ImageStatic({
                            url: url,
                            imageExtent: transformExtent(
                                [xmin, ymin, xmax, ymax],
                                'EPSG:4326',
                                'EPSG:4326'
                            ),
                        }),
                    });
                    imageLayer.setZIndex(20);
                    map.map.addLayer(imageLayer);
                });
            }
        },
        //过滤数据网格数据
        filterPointsByStep(points, numCols, step) {
            const filteredPoints = [];
            for (let i = 0; i < points.length; i++) {
                // 计算当前点的行索引和列索引
                const rowIndex = Math.floor(i / numCols);
                const colIndex = i % numCols;
                // 检查行索引和列索引是否都是步长的倍数
                if (rowIndex % step === 0 && colIndex % step === 0) {
                    filteredPoints.push(points[i]);
                }
            }
            return filteredPoints;
        },
    },
};
</script>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
::-webkit-scrollbar {
  display: none;
}
::v-deep .el-input__inner {
    background-color: #3c6485;
    border: 0;
    border-radius: 0;
    color: #fff;
}
::v-deep .el-date-editor .el-range-separator {
    color: white;
}
::v-deep .el-date-editor .el-range-input {
    background-color: #3c6485;
    color: white;
}
::v-deep .el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
    width: 300px;
}
.zzalk {
    .left-panel {
        position: absolute;
        left: 20px;
        width: 470px;
        background-color: rgba(8, 46, 82, 0.8);
        height: 75vh;
        top: -20px;
        z-index: 1;
        .title {
            height: 30px;
            line-height: 30px;
            border: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
            background-image: url('../../assets/images/panel/panel-bottom-left.png');
            background-repeat: no-repeat;
            background-size: 100%;
            color: #fff;
            h4 {
                font-size: 15px;
            }
        }
        .info-search {
            padding: 0 1rem;

            .query-section {
                display: flex;
                margin-top: 1rem;

                .time-label {
                    font-size: 0.8rem;
                    color: white;
                    line-height: 2rem;
                }
                .search-btn {
                    margin-left: 1rem;
                    font-size: 0.8rem;
                    color: white;
                    border: 0;
                    background-color: #3c6485;
                    padding: 1% 2%;
                }
                .search-btn:hover {
                    background-color: #2394ff;
                }
            }
        }
        .info-list {
            table {
                width: 92%;
                border-collapse: collapse;
                background-color: #3c6485;
                margin: 1rem;
                tr:hover {
                    background-color: #2394ff;
                }
                th,
                td {
                    border: 1px solid #ccc;
                    padding: 8px;
                    text-align: left;
                    color: white;
                    font-size: 0.8rem;
                    text-align: center;
                }
            }
        }
        .checkbox-group {
            color: white;
            font-size: 0.8rem;
            display: flex;
            justify-content: left;
            margin-top: 1rem;
            .check-label {
                margin-left: 1rem;
            }
        }
    }
    .right-panel {
        position: absolute;
        right: 20px;
        width: 440px;
        background-color: rgba(8, 46, 82, 0.8);
        height: 50vh;
        top: -20px;
        z-index: 1;
        .title {
            height: 30px;
            line-height: 30px;
            border: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5);
            background-image: url('../../assets/images/panel/panel-bottom-left.png');
            background-repeat: no-repeat;
            background-size: 100%;
            color: #fff;
            h4 {
                font-size: 15px;
            }
        }
        .fxResult {
            height: 424px;
    overflow-x: hidden;
    overflow-y: auto;
            table {
                width: 92%;
                height:100%;
                border-collapse: collapse;
                background-color: #3c6485;
                margin: 1rem;
                tr:hover {
                    background-color: #2394ff;
                }
                th,
                td {
                    border: 1px solid #ccc;
                    padding: 8px;
                    text-align: left;
                    color: white;
                    font-size: 0.8rem;
                    text-align: center;
                }
            }
        }
        // 右下
        .right-bottom {
            margin-top: 1rem;
            display: flex;
            position: relative;
            width: 100%;
            height: 25%;
            // height: 30%;

            .right-bottom-left {
                position: absolute;
                left: 8%;
                width: 20%;
                height: 100%;
            }

            .right-bottom-right {
                position: absolute;
                right: 0;
                width: 100%;
                height: 100%;
            }

            .right-bottom-content {
                // background-image: url("/src/assets/images/header/u0_state0.jpg");
                background-color: rgba(8, 46, 82, 0.8);
                background-size: contain;
                width: 100%;
                // height: 100%;
            }

            .right-bottom-bottom {
                position: absolute;
                bottom: -38px;
                width: 100%;
                height: 10px;
                background-image: url('/src/assets/images/panel/bottom.png');
                background-size: contain;
                background-repeat: no-repeat;
            }
        }
    }
}
</style>
